<!-- 教员平均分查看 -->
<template>
  <div class="wrapper-container" style="width:100%">
    <div class="search-container" style="margin:0">
     <span style="color: #004ca7;margin-top: 5px;">学期：</span>
      <el-select
        v-model="xq"
        style="width: 120px"
        size="mini"
        placeholder="请选择"
      >
        <el-option
          v-for="item in xqList"
          :key="item.value"
          :label="item.xqmc"
          :value="item.xqmc"
        >
        </el-option>
      </el-select>

      &nbsp;&nbsp;

      <!-- <SelectItem
        :name="'系'"
        :value="system"
        @change="
          (e) => {
            system = e;
          }
        "
        :xqList="systemList"
      ></SelectItem> -->
      <span style="color: #004ca7;margin-top: 5px;">系：</span>
      <el-select
        v-model="system"
        style="width: 120px"
        size="mini"
        placeholder="请选择"
        clearable
        @change="handleXb"
      >
        <el-option
          v-for="item in systemList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      &nbsp;&nbsp;
     <span style="color: #004ca7;margin-top: 5px;">教研室：</span>
      <el-select
        v-model="kkjys"
        style="width: 120px"
        size="mini"
        placeholder="请选择"
        clearable
        @change="handleClass"
      >
        <el-option
          v-for="item in kkjysList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      &nbsp;&nbsp;

      <!-- v-if="radio4 == '按督导专家'" -->
      <InputItem
        :name="'教员名称'"
        :value="teacherName"
        @input="
          (e) => {
            teacherName = e;
          }
        "
      ></InputItem>
     

      <div class="search-button" style="margin-right: 20px;margin-top: 3px;" @click="seleGroug">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span >查询</span>
      </div>

  
    </div>

    <div
      class="search-container"
      style="justify-content: flex-end !important; margin-top: 10px"
    >
     
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
        v-loading="ifTableLoading"
      >

        <el-table-column
          prop="skjy"
          label="教员"
          align="center"
        >
        </el-table-column>
        <el-table-column                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
          prop="ddpjf"
          width="120"
          label="督导平均分1"
          align="center"
        >
        </el-table-column>

        <el-table-column prop="skrq" label="日期" align="center">
        </el-table-column>
        <el-table-column prop="tkjc" label="听课节次" align="center">
        </el-table-column>
        <el-table-column prop="kcmc" label="课程名称" align="center">
        </el-table-column>
        <el-table-column prop="jxb" label="教学班" align="center">
        </el-table-column>
        <el-table-column prop="cd" label="上课地点" align="center">
        </el-table-column>

      
        <el-table-column prop="pdfs" label="评价分数" align="center">
        </el-table-column>
        <el-table-column prop="pjdj" label="评价等级" align="center">
        </el-table-column>
        <el-table-column
          prop="tckr"
          label="督导专家"
          align="center"
        >
        </el-table-column>
      
        <el-table-column width="200" prop="zjpy" label="评语" align="center">
     
        </el-table-column>
      </el-table>
    </div>

    <div
   
      class="search-container"
      style="justify-content: space-between !important; margin-top: 10px"
    >
     

      <div class="bottom-block">
        <div class="text">授课教员名字后加“*”为课程负责人</div>
      </div>
    </div>
    
  </div>
</template>

<script>
import {seleGroug} from "@/api/teacher/admin";
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import {
  reqGetXqList
  //getdepartmentOf
} from "../../../api/classHoursAddList/addList";
import { getxb, getClass, queryXBclassroom } from '../../../api/course/courses';
export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
  },
  data() {
    return {

      kkjys: "",
      kkjysList: [],
      radio4:  this.$route.query.radio4 ? this.$route.query.radio4 : "按教员统计",
      xq: "",
      xqList: [],
      state: "",
      stateList: [
        {
          value: "待提交",
          label: "待提交",
        },
        {
          value: "审批中",
          label: "审批中",
        },
        {
          value: "已审批",
          label: "已审批",
        },
        {
          value: "待审批",
          label: "待审批",
        },
      ],
      spacia: "",
      system: "",
      systemList: [
        //  {
        //   value: "一系",
        //   label: "一系",
        // },
        // {
        //   value: "二系",
        //   label: "二系",
        // },
        //  {
        //   value: "三系",
        //   label: "三系",
        // },
        // {
        //   value: "四系",
        //   label: "四系",
        // },
        //  {
        //   value: "五系",
        //   label: "五系",
        // }
      ],
      room: "教研室一",
      roomList: [],
      mounth: "12月",
      mounthList: [], 
      teacherName: "",
      tableData: [
        // {
        //   faculty: "系部1",
        //   teachRoom: "教研室1",
        //   position: "初职",
        //   score: "96",
        //   date: "2021-02-16",
        //   week: "星期一",
        //   classSessions: "1,2,3",
        //   coursename: "高级数学",
        //   teacher: "里教员",
        //   teachingClass: "数学一班",
        //   classPlace: "教室三",
        //   instructorUnit: "单位三",
        //   evaluationScore: "98",
        //   evaluationGrade: "A",
        //   supervisionExpert: "里教员",
        //   ExpertAffiliation: "办公室",
        //   comment:
        //     "表现不错表现不错表现不错表现不错表现不错表现不错表现不错表现不错表现不错表现不错表现不错表现不错表现不错表现不错表现不错",
        // },
        // {
        //   faculty: "系部1",
        //   teachRoom: "教研室1",
        //   position: "初职",
        //   score: "96",
        //   date: "2021-02-16",
        //   week: "星期一",
        //   classSessions: "1,2,3",
        //   coursename: "高级数学",
        //   teacher: "里教员",
        //   teachingClass: "数学一班",
        //   classPlace: "教室三",
        //   instructorUnit: "单位三",
        //   evaluationScore: "98",
        //   evaluationGrade: "A",
        //   supervisionExpert: "里教员",
        //   ExpertAffiliation: "办公室",
        //   comment: "表现不错",
        // },
        // {
        //   faculty: "系部1",
        //   teachRoom: "教研室1",
        //   position: "初职",
        //   score: "96",
        //   date: "2021-02-16",
        //   week: "星期一",
        //   classSessions: "1,2,3",
        //   coursename: "高级数学",
        //   teacher: "里教员",
        //   teachingClass: "数学一班",
        //   classPlace: "教室三",
        //   instructorUnit: "单位三",
        //   evaluationScore: "98",
        //   evaluationGrade: "A",
        //   supervisionExpert: "里教员",
        //   ExpertAffiliation: "办公室",
        //   comment: "表现不错",
        // },
      ],

      ifTableLoading: false

    };
  },
  computed: {
    config() {
      return {
        mergeTarget: "id", // 通用依据
        combineProp:
          this.radio4 == "按月份统计"
            ? []
            : [
                // combineProp - 根据mergeTarge 进行合并的单元格属性
                "faculty",
                "teachRoom",
                "teacher",
                "position",
                "score",
              ],
      };
    },
  },
  watch: {
  
  },
  methods: {
    async initPageData() {
      this.ifTableLoading = true;
      await this.getXqList();
      await this.getDepartmentList();
      await this.getClassroomList();
      await this.seleGroug();
      await this.handleXb(this.system)
    },
    
    async getXqList() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        let xqList = result.data.data;
        if (!Array.isArray(xqList)) {
          xqList = [];
        }
        
        if (xqList.length > 0) {
          this.xq = xqList[0].xqmc;
        }

        this.xqList = xqList;
      }
    },

    async getDepartmentList() {
      return new Promise((resolve, reject) => {
        getxb().then(res => {
          let systemList = res.data.data;
          if (!Array.isArray(systemList)) {
            systemList = [];
          }

          if (systemList.length > 0) {
            this.system = systemList[0].id;
          }

          systemList = systemList.map(item => ({value:item.id, label:item.deptName}));
          this.systemList = systemList;
          resolve();
        });
      });
    },
    
    // async getdepartmentOf() {
    //   return new Promise(() => {
    //     getdepartmentOf().then(res => {
    //       this.kkjysList = res.data.data;
    //     });
    //   });
    // },

    async getClassroomList() {
      return new Promise((resolve, reject) => {
        getClass().then(res => {
          let classroomList = res.data.data;
          if (!Array.isArray(classroomList)) {
            classroomList = [];
          }

          if (classroomList.length > 0) {
            this.kkjys = classroomList[0].id;
          }
          classroomList = classroomList.map(item => ({value:item.id, label:item.deptName}));
          this.kkjysList = classroomList;
          resolve();
        });
      });
    },
    // 根据系部选中获取教研室
    async handleXb(val){
      if(val){
        const valO = this.systemList.filter(res=>{
          return res.value == val;
        })
        this.kkjys = '';
        let xbList = [];
        const xbClass = await queryXBclassroom(valO[0].label);
        if(xbClass.data.code == 200) {
          xbList = xbClass.data.data.map(item => ({value:item.code, label:item.value}));
          this.kkjysList = xbList;
          // if (this.kkjysList.length > 0) {
          //   this.kkjys = this.kkjysList[0].value;
          // }
        }
      } else {
        this.getDepartmentList();
        this.getClassroomList();
      }
    },
    // 教研室下拉框的改变
    handleClass(val){
      if(!val){
        this.system ? this.handleXb(this.system)  : this.getClassroomList();
      }
    },
    
    async seleGroug() {
      let obj = {
        term: this.xq,
        xi: this.system,
        jys: this.kkjys,
        skjy: this.teacherName
      };
      return new Promise(resolve => {
        seleGroug(obj).then((res) => {
          this.ifTableLoading = false;
          let tableData = res.data.data;
          if (!Array.isArray(tableData)) {
            tableData = [];
          }
          this.tableData = tableData;
          resolve();
        });
      });
    },

    arraySpanMethod({ row, column }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
    choiceLink(index) {
      this.record = index;
    },
    checkboxChange(e) {
      console.log(e);
    },

    isEmpty(val) {
      return typeof val == "undefined" || val === null || val == "-";
    },
    isObject(val) {
      return Object.prototype.toString.call(val) === "[object Object]";
    },
    mergeRow() {
      let arr = [].concat(this.tableData);
      // arr.splice(index, 0, Object.assign({}, row))

      this.tableData = this.mergeData(arr);
    },
    mergeData(list) {
      // mergeTarge - 合并项依据
      // combineProp - 根据mergeTarge 进行合并的单元格属性
      return this.filterData(this.config, [].concat(list));
    },
    filterData(config, tableData, targetProp) {
      const { mergeTarget, combineProp } = config;
      // 叠加的合并条件
      combineProp.forEach((column) => {
        // 记录合并项
        let combineCount = 1;
        if (this.isObject(column)) {
          return this.filterData.call(this, column, tableData, mergeTarget);
        }
        // 使用倒序遍历
        for (let i = tableData.length - 1; i >= 0; i--) {
          let curr = tableData[i],
            prev = tableData[i - 1];

          if (this.isEmpty(prev)) {
            // 已经循环完毕
            curr[`${column}-span`] = {
              rowspan: combineCount,
              colspan: combineCount >= 1 ? 1 : 0,
            };
            break;
          }

          if (
            prev[targetProp] === curr[targetProp] &&
            prev[mergeTarget] === curr[mergeTarget] &&
            prev[`${column}`] === curr[`${column}`]
          ) {
            ++combineCount;
            curr[`${column}-span`] = {
              rowspan: 0,
              colspan: 0,
            };
          } else {
            curr[`${column}-span`] = {
              rowspan: combineCount,
              colspan: combineCount >= 1 ? 1 : 0,
            };
            prev[`${column}-span`] = {
              rowspan: 1,
              colspan: 1,
            };
            // 前后项不相符时，对combinecount进行重置
            combineCount = 1;
          }
        }
      });
      return tableData;
    },
  },
  created() {
    this.initPageData();
    //this.mergeRow();
    // this.getdepartmentOf();
    //  this.getXqList();
    //  this.seleGroug();
  },
  mounted() {
    var _this = this;
    var tempArry = Array.from(new Array(12).keys());
    tempArry.forEach(function (e) {
      _this.mounthList.push({
        value: e + 1,
        label: e + 1 + "月",
      });
    });
  },
};
</script>


<style lang="scss">
.table-container {
  table thead tr th {
    background-color: #F5F7FA;
    color: #004CA7;
    font-weight: bold;
  }
}
</style>

<style lang="less" scoped>
@fontFamily: 'Microsoft YaHei';
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;

            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.search-container {
  justify-content: flex-start !important;
}
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 15px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
.content-div {
  max-width: 200px;
}
.comment-div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.table-container::v-deep .el-table__header th {
  border-color: #c7d7eb !important;
  padding-left: 10px;
}
.filter-button::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid rgb(251, 30, 21);
  color: rgb(251, 30, 21);
  background-color: rgb(254, 234, 235);
}
.filter-button::v-deep
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  border: 1px solid rgb(251, 30, 21);
  color: white;
  background-color: rgb(251, 30, 21);
}
.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}
.table-container {
  margin-top: 15px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
